<%-- 
    Document   : view
    Created on : Aug 12, 2012, 9:24:33 AM
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Khoa 2</title>        
        <jsp:include page="include.jsp"></jsp:include>

    </head>
    <body>
        <h1>Danh Sach Hoc Vien</h1>
        <form method="POST" action="themmoi">
            <table border="1">
                <tr>                
                    <th>ID</th>
                    <th>Name</th>                
                    <th>Ngay sinh</th>
                    <th>CMND</th>
                    <th>Action</th>
                </tr>

                <c:forEach var="HocVien" items="${DanhSachHocVien}"> 
                    <tr>
                        <td>${HocVien.idtest}</td>
                        <td>${HocVien.name}</td>
                        <td><fmt:formatDate pattern="MM/dd/yyyy" 
                                        value="${HocVien.ngaysinh}" /></td>
                    <td>${HocVien.cmnd}</td>
                    <td><a href="chinhsua?id=${HocVien.idtest}">Sua</a> / <a onclick="if(confirm('Ban thuc su muon xoa')){return true;}else{return false;}" href="xoa?id=${HocVien.idtest}">Xoa</a></td>
                    </tr>
                </c:forEach>
            </table>
            <input type="button" id ="btnAdd" name="btnAdd" value="Them Hoc Vien" />
        </form>
        <div id="frmThemHV">
            <p class="validateTips">All form fields are required.</p>
            <form id="formThemHV" method="POST" action="themhv">
                <table border="1" cellspacing="0">           
                    <tr><td colspan="2" align="center"><h1>Thong tin Hoc Vien</h1></td></tr>
                    <tr><td>Ten:</td><td><input type="text" name="Ten" id="Ten" /></td></tr>
                    <tr><td>Ngay sinh(dd/mm/yyyy)</td><td><input type="text" name="NgaySinh" id="NgaySinh" /></td></tr>
                    <tr><td>CMND:</td><td><input type="text" name="CMND" id="CMND" /><span id="ajaxLoader"></span></td></tr>

                </table>             
            </form>
        </div>
        <script>
            var name = $( "#Ten" ),			
            birthday = $( "#NgaySinh" ),
            cmnd = $( "#CMND" ),
            allFields = $( [] ).add( name ).add( birthday ).add( cmnd ),
            tips = $( ".validateTips" );
            function updateTips( t ) {
                tips
                .text( t )
                .addClass( "ui-state-highlight" );
                setTimeout(function() {
                    tips.removeClass( "ui-state-highlight", 1500 );
                }, 500 );
            }

            function checkLength( o, n, min, max ) {
                if ( o.val().length > max || o.val().length < min ) {
                    o.addClass( "ui-state-error" );
                    updateTips( n + " phai co tu " +
                        min + " den " + max + " ki tu." );
                    return false;
                } else {
                    return true;
                }
            }
                

            function checkRegexp( o, regexp, n ) {
                if ( !( regexp.test( o.val() ) ) ) {
                    o.addClass( "ui-state-error" );
                    updateTips( n );
                    return false;
                } else {
                    return true;
                }
            }
                
            function checkOld(o,n){
                var now = new Date();
                var minutes = 1000*60;
                var hours = minutes*60;
                var days = hours*24;     
                var date2 = new Date(o.val());
                var diff = Math.abs(now.getTime() - date2.getTime());
                var old = Math.round(diff/days)/365;
                if(old<16){
                    o.addClass( "ui-state-error" );
                    updateTips( n );
                    return false;
                }else{
                    return true;
                }                    
            }
           
            function checkDuplication(o,n){               
              var rs ='';
                $("#ajaxLoader").html("Checking...");
                $.ajax({
                    url: 'valid',
                    
                    data: {CMND:o.val()},
                    success: function(data) {                                               
                        $("#ajaxLoader").html("");
                        rs = data;
                    },
                    dataType: "html"
                }); 
                if(rs=="ok"){
                    return true;
                }else{                    
                    updateTips( n );
                    return false;
                }
            }
            
            $( "#frmThemHV" ).dialog({
                autoOpen: false,
                height: 450,
                width: 380,
                modal: true,
                buttons: {
                    "Them Hoc Vien": function() {
                        var bValid = true;
                        allFields.removeClass( "ui-state-error" );

                        bValid = bValid && checkLength( name, "Ten", 3, 56 );
                        bValid = bValid && checkRegexp( name, /^[a-zA-Z\s]{3,16}$/i,"Ten chi cho phep ky tu" );
                        bValid = bValid && checkRegexp( birthday, /^[0,1]?\d{1}\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([2-9]{1}\d{3}))$/i, "Dinh dang ngay thang khong chinh xac." );
                        bValid = bValid && checkOld(birthday,'Ban chua du tuoi !')
                        bValid = bValid && checkRegexp( cmnd, /^(\d{9})$/, "CMND khong hop le." );
                        bValid = bValid && checkDuplication(cmnd, 'cmnd daton tai');
                     
                        if(bValid){                          
                            $( "#formThemHV" ).submit();
                        }
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    allFields.val( "" ).removeClass( "ui-state-error" );
                }
            });

            $( "#btnAdd" )
            .button()
            .click(function() {
                $( "#frmThemHV" ).dialog( "open" );
            }); 
        </script>
        <jsp:include page="footer.jsp"></jsp:include>
    </body>
</html>
